<template>
	<view class="tools">
		<a-card title="每度电的电价" :show-foot="false" :show-head="false">
			<view class="" slot="body">
				<u--form ref="uForm" label-width="150">
					<u-form-item label="每度电价">
                        <u--input v-model="form.dj" placeholder="请输入电价" border="bottom"></u--input><view slot="right">元</view>
                    </u-form-item>
					<u-form-item label="设备功率">
                        <u--input v-model="form.gl" placeholder="请输入功率" border="bottom"></u--input><view slot="right">瓦</view>
                    </u-form-item>
					<u-form-item label="每天使用">
                        <u--input v-model="form.dayTxt" type="select" @focus="showDay = true" border="bottom"></u--input>
                    </u-form-item>
					<u-form-item label="每月使用">
                        <u--input v-model="form.monthTxt" type="select" @focus="showMonth = true" border="bottom"></u--input>
                    </u-form-item>
				</u--form>
				<u-button @click="submit">计算电费</u-button>
			</view>
		</a-card>
		<a-card title="每度电的电价" :show-foot="false" :show-head="false">
			<view class="" slot="body">
				<u--form ref="uForm" label-width="200">
					<u-form-item label="每月的用电量">
                        <u--input placeholder=" " :disabled="true" v-model="result.vol" border="bottom"></u--input><view slot="right">度</view>
                    </u-form-item>
					<u-form-item label="每周电费大约">
                        <u--input placeholder=" " :disabled="true" v-model="result.week" border="bottom"></u--input><view slot="right">元</view>
                    </u-form-item>
					<u-form-item label="每月电费大约">
                        <u--input placeholder=" " :disabled="true" v-model="result.month" border="bottom"></u--input><view slot="right">元</view>
                    </u-form-item>
					<u-form-item label="每年电费大约">
                        <u--input placeholder=" " :disabled="true" v-model="result.year" border="bottom"></u--input><view slot="right">元</view>
                    </u-form-item>
				</u--form>
			</view>
		</a-card>
		<u-picker :show="showDay" :columns="dayList" @confirm="dayConfirm"  keyName="label" @cancel="cancel('showDay')"></u-picker>
		<u-picker :show="showMonth" :columns="monthList" @confirm="monthConfirm"  keyName="label" @cancel="cancel('showMonth')"></u-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var app = getApp();
    import aCard from '@/components/u-card/u-card.vue'
	export default {
		data() {
			return {
				colors: '',
				form: {
					dj: null,
					gl: null,
					day: 24,
					month: 30,
					dayTxt: '24小时',
					monthTxt: '30天'
				},
				result: {},
				dayList: [],
				monthList: [],
				showDay: false,
				showMonth: false
			};
		},
        components:{
           aCard
        },
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.setData({
				colors: app.globalData.newColor
			});
			let dayList = [];
			for(let i = 1; i <= 24; i++){
				dayList.push({value: i, label: i + '小时'})
			}
			let monthList = [];
			for(let i = 1; i <= 30; i++){
				monthList.push({value: i, label: i + '天'})
			}
			this.setData({
				dayList: [dayList],
				monthList: [monthList]
			})
            // #ifdef MP-WEIXIN
            wx.showShareMenu({
              withShareTicket: true,
              menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
		},
        // #ifdef MP-WEIXIN
        onShareAppMessage(res) {
            if (res.from === 'button') {// 来自页面内分享按钮
              console.log(res.target)
            }
            return {
              title: '给您分享个好工具-电费计算器',
              path: '/pages/tools/electric'
            }
        },
        // #endif
		methods: {
			dayConfirm(e) {
				let form = this.form;
				form.day = e.value[0].value;
				form.dayTxt = e.value[0].label;
				this.setData({
					form: form
				})
                this.showDay = false
			},
			monthConfirm(e) {
				let form = this.form;
				form.month = e.value[0].value;
				form.monthTxt = e.value[0].label;
				this.setData({
					form: form
				})
                this.showMonth = false
			},
			submit() {
				let x;let h;let f;let t;let v;let q;let u;let r;let w;
				if(!this.form.dj){
					this.$refs.uToast.show({
						title: '请输入电价',
                        message: '请输入电价',
						type: 'error'
					})
					return;
				}
				if(!this.form.gl){
					this.$refs.uToast.show({
						title: '请输入功率',
                        message: '请输入功率',
						type: 'error'
					})
					return;
				}
				t = this.form.dj; //每度电价
				t = parseFloat(t);
				x = this.form.gl; //设备功率
				x = parseFloat(x);
				h = this.form.day //每天使用
				f = this.form.month //每月使用
				let kwhperday= x / 1e3 * h;
				v = kwhperday * f;
				if(v>20){
					v=v
				}else{
					v=v*10/10
				}
				let costperday = kwhperday * t;
				u = kwhperday * f * t;
				w = u * 12;
				r = costperday * 7;
				this.setData({
					result: {
						vol: v.toFixed(),
						week: r.toFixed(2),
						month: u.toFixed(2),
						year: w.toFixed(2)
					}
				})
			},
            cancel(name) {
                this[`${name}`] = false
            }
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #F5F5FA;
	}
	.result{
		padding: 0 4%;
		margin-top: 20upx;
		background-color: #ffffff;
	}
	.result .title{
		padding: 30upx 0 20upx 0;
		font-size: 30upx;
		font-weight: bold;
	}
	.t_input {
		padding: 20upx 4%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.t_input .title {
		height: 80upx;
		line-height: 80upx;
		color: #333;
		font-weight: bold;
		width: 100upx;
	}

	.t_input .inputs {
		color: #333;
		font-size: 32upx;
	}

	.inputs input {
		height: 80upx;
		line-height: 80upx;
		width: 100%;
		display: block;
	}

	.all_btn {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		width: 150upx;
	}

	.jilu {
		height: 60upx;
		line-height: 60upx;
		padding: 0 4%;
		font-size: 28upx;
		color: #999;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin-top: 10upx;
	}

	.addclerk {
		width: 80%;
		height: 82upx;
		line-height: 82upx;
		border-radius: 15upx;
		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		position: fixed;
		bottom: 30upx;
		left: 50%;
		transform: translateX(-50%);
		background-color: pink;
	}

	.addclerk:active {
		opacity: 0.8;
	}
</style>
<style>
	page {
		background-color: #F5F5FA;
	}
</style>
